<template>
    <el-dialog :title="title" center :visible.sync="dialogVisible" width="500px" :before-close="handleClose">
        <!-- 若“v-loading”的值为“true”，则显示“加载中”，否则不显示“加载中”↓ -->
        <el-form ref="formData" v-loading="loading" label-width="80px">
            <!-- 注：“:data”表示“绑定的被渲染的数据”，它是一个数组；“show-checkbox”表示“显示勾选框”；“node-key”表示“树节点的唯一标识属性名”；“:props”被用于“配置响应的数据中对应展示的属性名（其中‘children’是‘表示子菜单的属性名’，‘label’是‘表示菜单名的属性名’）”；“:default-checked-keys”表示“默认勾选的集合（默认选中的节点）”；“:default-expanded-keys”被用来设置“默认展开的节点”；“accordion”表示“启用‘手风琴模式’”（即“对于同一级的节点，每次只能展开一个，点击展开第二个后会自动隐藏之前已展开的那个”）↓ -->
            <!-- <el-tree :data="data" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]" :props="defaultProps"> -->
            <!-- <el-tree :data="menuList" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]" :props="defaultProps"> -->
            <!-- <el-tree :data="menuList" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]" :props="{children:'children',label:'name'}"> -->
            <el-tree ref="tree" :data="menuList" show-checkbox node-key="id" :default-checked-keys="menuIds" :props="{children:'children',label:'name'}" accordion>
            </el-tree>
        </el-form>
        <span slot="footer" class="dialog-footer" style="margin-left: 0px;">
            <el-button type="primary" @click="submitForm('formData')" size="mini">确 定</el-button>
            <el-button @click="handleClose" size="mini">取 消</el-button>
        </span>
    </el-dialog>
</template>
<script>
import menuApi from '@/api/menu'
import roleApi from '@/api/role'
  export default {
    props:{
        title:{ // ←左边这项表示“弹出的对话框的标题”
            type:String,
            default:'',
        },
        dialogVisible:{ // ←左边这项被用来控制是否弹出对话框。取值为“true”时弹出对话框。
            type:Boolean,
            default:false,
        },
        remoteClose:Function, // ←左边这项被用来关闭对话框
        roleId:null, // ←左边这项表示“角色ID”
    },  
    data() {
        return {
            menuList:[], // ←左边这项表示“被用于存储所有菜单的数组”
            menuIds:[], // ←左边这项表示“默认选中的菜单IDs”
            /* data: [{
                id: 1,
                label: '一级 1',
                children: [{
                    id: 4,
                    label: '二级 1-1',
                    children: [{
                        id: 9,
                        label: '三级 1-1-1'
                        }, {
                        id: 10,
                        label: '三级 1-1-2'
                    }]
                }]
            },
            {
                id: 2,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1'
                    }, {
                    id: 6,
                    label: '二级 2-2'
                }]
            },
            {
                id: 3,
                label: '一级 3',
                children: [{
                    id: 7,
                    label: '二级 3-1'
                }, {
                    id: 8,
                    label: '二级 3-2'
                }]
            }], */
            /* defaultProps: {
            children: 'children',
            label: 'label'
            } */
            loading:false, // 左边这一项被用于控制是否显示“加载中”。当左边这一项为“true”时显示“加载中”，否则不显示“加载中”
        }
    },
    methods: {
        // 获取所有菜单
        getMenuList(){
            // 加载中
            this.loading = true
            menuApi.getList({}).then(response => { // ←因为当前没有查询条件，查询的是所有的菜单，所以要在左边这项的括号中传递一个空对象
                console.log('response.data',response.data)
                this.menuList = response.data
                // 查询角色之前拥有的菜单IDs，然后进行回显
                this.getMenuIdsByRoleId()
            })
            // 加载完成
            this.loading = false
        },
        // 查询角色之前拥有的菜单IDs，然后进行回显
        async getMenuIdsByRoleId(){
            const {data} = await roleApi.getMenuIdsByRoleId(this.roleId) // ←注：左边这项采用了“解构赋值”的形式（具体为返回的“response.data”的值被赋值给了“{data}”中的“data”）
            this.menuIds = data
        },
        // 提交表单数据
        submitForm(formName){
            // 获取所有被选中的菜单ID
            const checkedMenuIds = this.$refs.tree.getCheckedKeys()
            // 调用保存角色所拥有的权限菜单接口
            roleApi.saveRoleMenu(this.roleId,checkedMenuIds).then(response => {
                if (response.code === 20000) {
                    this.$message({
                        message:'分配权限成功',
                        type:'success',
                        center:true
                    })
                    // 关闭对话框
                    this.handleClose()
                } else {
                    this.$message({
                        message:'分配权限失败',
                        type:'error',
                        center:true
                    })
                    console.log('分配权限失败');
                    return false;
                }
            })
            /* this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 校验通过，提交表单数据
                    this.submitData()
                } else {
                    this.$message({
                        message:'提交表单失败（表单验证未通过）',
                        type:'error',
                        center:true
                    })
                    console.log('提交表单失败（表单验证未通过）');
                    return false;
                }
            }); */
        },
        // 关闭对话框
        handleClose(){
            this.menuList = []
            this.menuIds = []
            // “this.dialogVisible = false” ←左边这种写法是错误的，因为“dialogVisible”在这个组件中是使用“props”选项接收的从其父组件中被传递过来的属性，所以在作为子组件的这个组件中不能直接修改其值。
            this.remoteClose() // ←左边这项表示通过触发名为“remoteClose”的事件函数来关闭对话框
        },
    },
    watch: {
        dialogVisible(value){
            if(value){
                // 若dialogVisible = “true”，则加载所有菜单
                this.getMenuList()
            }
        }
    }
  };
</script>